<template>
  <div id="detail">
    <detail-nav-bar @itemClick="titleClick" :current-index="currentIndex"></detail-nav-bar>
    <Scroll ref="scroll" class="content" @scroll="contentScroll">
      <div>
        <detail-swiper :banners="detail.topImages"></detail-swiper>
        <detail-base-info :goods="detail.goods"></detail-base-info>
        <detail-shop-info :shop="detail.shop"></detail-shop-info>
        <detail-goods-info :detail-info="detail.detailInfo" @imageLoad="imageLoad"></detail-goods-info>
        <detail-param-info ref="param" :param-info="detail.paramInfo"></detail-param-info>
        <detail-comment-info ref="comment" :comment-info="detail.commentInfo"></detail-comment-info>
        <detail-recommend-list ref="recommend" :recommend-list="recommendList"></detail-recommend-list>
      </div>
    </Scroll>
    <detail-bottom-bar @addToCart="addToCart"></detail-bottom-bar>
  </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailBottomBar from 'views/detail/childComps/DetailBottomBar'
import Scroll from '@/components/common/scroll/Scroll'
import DetailSwiper from 'views/detail/childComps/DetailSwiper'
import DetailBaseInfo from 'views/detail/childComps/DetailBaseInfo'
import DetailShopInfo from 'views/detail/childComps/DetailShopInfo'
import DetailGoodsInfo from 'views/detail/childComps/DetailGoodsInfo'
import DetailCommentInfo from 'views/detail/childComps/DetailCommentInfo'
import DetailParamInfo from 'views/detail/childComps/DetailParamInfo'
import DetailRecommendList from 'views/detail/childComps/DetailRecommendList'
import {getDetail, getRecommend} from "network/detail";
import { debounce } from "@/common/utils";

export default {
  name: 'IshopDetail',
  components:{
    DetailNavBar,
    DetailBottomBar,
    Scroll,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailCommentInfo,
    DetailParamInfo,
    DetailRecommendList
  },
  data() {
    return {
      detail:{},
      recommendList: [],
      currentIndex: 0,
      themeTops: [],
      getThemeTopY: null,
    };
  },
  created() {
    this._getDetailData();
    this._getRecommend();
    this.getThemeTopY = debounce(()=>{
      this._getOffsetTops()
    }, 500)
  },
  updated() {
    console.log('detail updated');
  },
  methods: {
    _getDetailData(){
      const id = this.$route.query.id
      getDetail(id).then((result) => {
        this.detail = result.detail
        console.log('getDetail', id, this.detail);
      }).catch((err) => {
        console.log(err);
      });
    },
    _getRecommend() {
      getRecommend().then((result) => {
        this.recommendList = result.recommend
      }).catch((err) => {
        console.log(err);
      });
    },
    titleClick(index) {
      this._getOffsetTops()
      this.currentIndex = index
      this.$refs.scroll.refresh()
      this.$refs.scroll.scrollTo(0, -this.themeTops[index], 100)
    },
    contentScroll(position) {
        // 2.监听滚动到哪一个主题
        this._listenScrollTheme(-position.y)
    },
    _listenScrollTheme(position) {
        let length = this.themeTops.length;
        for (let i = 0; i < length; i++) {
          let iPos = this.themeTops[i];
          /**
           * 判断的方案:
           *  方案一:
           *    条件: (i < (length-1) && currentPos >= iPos && currentPos < this.themeTops[i+1]) || (i === (length-1) && currentPos >= iPos),
           *    优点: 不需要引入其他的内容, 通过逻辑解决
           *    缺点: 判断条件过长, 并且不容易理解
           *  方案二:
           *    条件: 给themeTops最后添加一个很大的值, 用于和最后一个主题的top进行比较.
           *    优点: 简洁明了, 便于理解
           *    缺点: 需要引入一个较大的int数字
           * 疑惑: 在第一个判断中, 为什么不能直接判断(currentPos >= iPos)即可?
           * 解答: 比如在某一个currentPos大于第0个时, 就会break, 不会判断后面的i了.
           */
          if (position >= iPos && position < this.themeTops[i+1]) {
            if (this.currentIndex !== i) {
              this.currentIndex = i;
            }
            break;
          }
        }
      },
    // 监控图片加载完成后刷新一下
    imageLoad() {
      this.$refs.scroll.refresh()
      // 在图片加载完成后再调防抖函数
      this.getThemeTopY();
    },
    _getOffsetTops() {
		    this.themeTops = []
        this.themeTops.push(0)
        this.themeTops.push(this.$refs.param.$el.offsetTop)
        this.themeTops.push(this.$refs.comment.$el.offsetTop)
        this.themeTops.push(this.$refs.recommend.$el.offsetTop)
        this.themeTops.push(Number.MAX_VALUE)
        // console.log('ziqss',this.themeTops);
    },
    addToCart(){
       // 1.创建对象
      const obj = {}
        // 2.对象信息
      obj.id = this.detail.id;
      obj.imgURL = this.detail.topImages[0]
      obj.title = this.detail.goods.title
      obj.desc = this.detail.goods.desc;
      obj.newPrice = this.detail.goods.nowPrice;

      this.$store.commit('cart/addCart', obj)
    }
  },
};
</script>

<style scoped>
  #detail {
    height: 100vh;
    position: relative;
    z-index: 1;
    background-color: #fff;
  }
  .back{
    margin-top: 0px;
  }

  .content{
    position: absolute;
    top: 44px;
    bottom: 58px;
    left: 0;
    right: 0;
  }
</style>